<template>
	<div>
		<p>
		<button class="btn btn-white btn-default btn-round" @click="refresh()">
			<i class="ace-icon fa fa-refresh red"></i>
			刷新
		</button>
		</p>

		<table id="simple-table" class="table  table-bordered table-hover">
		<thead>
			<tr>
				<th class="center">ID</th>
				<th class="center">邮箱</th>
				<th class="center">密码</th>
				<th class="center">昵称</th>
				<th class="center">头像url</th>
				<th class="center">注册时间</th>
			</tr>
		</thead>

		<tbody>
			<tr v-for="member in members">
				<td class="center">{{member.id}}</td>
				<td class="center">{{member.mobile}}</td>
				<td class="center">{{member.password}}</td>
				<td class="center">{{member.name}}</td>
				<td class="center">{{member.photo}}</td>
				<td class="center">{{member.registerTime}}</td>
			</tr>
			<tr v-if="members.length === 0">
				<td colspan="6" class="center" style="background-color: lightgrey;font-family: 'Courier New',serif">暂无数据</td>
			</tr>
	</tbody>
	</table>
	<!-- 分页组件 -->
	<pagination ref="pagination" v-bind:list="list"></pagination>

	<!-- 模态框 -->
	<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content" style="border-color: #aa160e;background-color: lightblue">
	      <div class="modal-header">
	        <button type="button" class="close blue" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title grey bolder" style="font-family: 'Courier New', Courier, monospace" id="myModalLabel">{{modalTitle}}</h4>
	      </div>
	      <div class="modal-body">
			  <form class="form-horizontal" role="form">
				  <div class="form-group">
					  <label class="col-sm-3 control-label no-padding-right" style="font-family: 'Courier New', Courier, monospace"> 名称 </label>

					  <div class="col-sm-9">
						  <input v-model="member.name" type="text"  placeholder="角色名称" class="col-xs-10 col-sm-5" />
					  </div>
				  </div>
				  <div class="form-group">
					  <label class="col-sm-3 control-label no-padding-right" style="font-family: 'Courier New', Courier, monospace"> 课程</label>

					  <div class="col-sm-9">
						  <input v-model="member.courseId" type="text"  placeholder="课程" class="col-xs-10 col-sm-5" />
					  </div>
				  </div>
			  </form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default btn-round" style="font-family: 'Courier New', Courier, monospace" data-dismiss="modal">
				关闭</button>
	        <button @click="save()" type="button" class="btn btn-primary btn-round" style="font-family: 'Courier New', Courier, monospace">
				保存</button>
	      </div>
	    </div>
	  </div>
	</div>
	</div>

</template>

<script>
	import Pagination from "../../components/pagination.vue"
	export default {
		name: "member",
		components:{
			Pagination
		},
		data:function(){
			return{
				members:[],
				member:{
					name:"",
					courseId:''
				},
				modalTitleArr:{
					insert: "新增角色",
					update: "修改角色"
				},
				modalTitle: ""
			}
		},
		mounted: function(){
			// this.$parent.activeSidebar("business-member-sidebar")
			let _this = this;
			_this.list();
		},
		methods:{
			/* 打开新增模态框 */
			openAddModal(){
				let _this = this;
				_this.clearMember();
				_this.modalTitle = _this.modalTitleArr.insert;
				$("#myModal1").modal({backdrop:'static'});
				$("#myModal1").modal("show");

			},
			/*打开编辑模态框*/
			openEditModal(id){
				let _this = this;
				_this.clearMember();
				_this.modalTitle = _this.modalTitleArr.update;
				_this.$ajax.get(process.env.VUE_APP_SERVER + '/business/admin/member/findById/'+id).then((response)=>{
					_this.member = response.data.data;
				});
				$("#myModal1").modal({backdrop:'static'});
				$("#myModal1").modal("show");
			},
			refresh() {
				let _this = this;
				Loading.show();
				_this.list(_this.$refs.pagination.page);
				Loading.hide();
			},
			/* 查找角色 */
			list(page=1) {
				let _this = this;
				_this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/member/list',{
					page:page,
					size:_this.$refs.pagination.size
				}).then((response)=>{
					_this.members = response.data.data.list;
					_this.$refs.pagination.render(page, response.data.data.total);
				})
			},
			/*保存角色信息到后台*/
			save(){
				let _this = this;
				if (!_this.member.id) {
					/*不存在id为新增*/
					_this.insert();
				} else {
					/*存在id为修改*/
					_this.update();
				}
			},
			/*新增角色*/
			insert(){
				let _this = this;
				/*新增校验*/
				if (!Validator.require(_this.member.name,"名称")
				|| !Validator.require(_this.member.courseId, "课程")
				|| !Validator.length(_this.member.courseId,"课程ID",1,19)) {
					return;
				}
				_this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/member/save', _this.member).then((response)=>{
					console.log(response);
					if (response.data.success) {
						_this.list(_this.$refs.pagination.page);
						Toast.success(response.data.message);
					} else {
						Toast.error(response.data.message);
					}
					$("#myModal1").modal("hide");
				});
			},
			/*修改角色*/
			update(){
				let _this = this;
				/*更新校验*/
				if (!Validator.require(_this.member.name,"名称")
						&& !Validator.require(_this.member.courseId, "课程")
						|| !Validator.length(_this.member.courseId,"课程ID",1,19)) {
					return;
				}
				_this.$ajax.put(process.env.VUE_APP_SERVER + '/business/admin/member/update', _this.member).then((response)=>{
					if (response.data.success) {
						_this.list(_this.$refs.pagination.page);
						Toast.success(response.data.message);
					} else {
						Toast.error(response.data.message);
					}
					$("#myModal1").modal("hide");
				})
			},
			/*删除角色*/
			deleteById(id){
				let _this = this;
				/*删除提示框*/
				Confirm.show("",()=>{
					_this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/member/deleteById/' + id).then((response)=>{
						if (response.data.success) {
							_this.list(_this.$refs.pagination.page);
							Toast.success(response.data.message);
						} else {
							Toast.error(response.data.message);
						}
						$("#myModal1").modal("hide");
					})
				});
			},
			/*清空模态框的数据*/
			clearMember() {
				let _this = this;
				_this.member = {name:"",courseId: "",id:""};
				_this.modalTitle = "";
			}
		}
	}
</script>
